<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 【微调：文字或者图片】 
			margin使用问题1：自适应居中 建议使用，套块元素 行块内元素，行内元素
			      使用问题2
			*/
			img{
				border: 1px solid red;
				/* margin:1个属性值  顺时针：上 右 下 左*/
				margin:200px;
				/* margin：2个属性值 顺时针：上 下 右 左 */
				margin:10px 200px;
				/* 常用：盒子自适应居中---失效 
				   margin使用问题1： 自适应居中，必须设置宽度
				*/
				margin: 0 auto;
				/* margin 3个属性值 顺时针：上 右 左 下 */
				margin:100px 200px 300px;
				/* margin 4个属性值 顺时针：上 右 下 左 */
				margin:100px 200px 300px 400px;
			}
			h1{
				/* 块元素 可以设置高宽 不在一行显示 无法居中 内设文本 */
			/* 常用：盒子自适应居中--*/
			width: 100%;
			border: 1px solid red;
			text-align: center;
			}
			span{
				/* 行元素 不可以设置高度 在一行显示 ，无法居中 设置文本
				 text-align: center;
				 */
			/* 常用：盒子自适应居中--*/
			width: 100px;
			border: 1px solid red;
		    text-align: center;
			
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型：四个部分组成，
		                     外边距：边框以外四周，叫做外边距
							 边框：--
							 内边距：边框以内 与内容 之间距离，叫做内边距
							 内容：
		所有元素存在于框模型中-->
				<h1>块级模型</h1>
				<img src="img/imge/p_small_001.jpg" width="300px" height="300px" alt="水杯">
				<span>行元素：水杯</span>
	</body>
</html>